<template>
  <div class="user-management">
    <div class="search-container">
      <div class="search-input">
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="paramsForm.keywords"
          style="margin-left: 40px; width: 500px"
        ></el-input>
      </div>
      <div class="button">
        <el-button
          type="primary"
          size="small"
          @click="getScoreList()"
          class="search-button"
          style="height: 30px"
        >
          搜索
        </el-button>
        <el-button
          type="primary"
          size="small"
          @click="resetInput()"
          class="search-button"
          style="height: 30px"
        >
          重置
        </el-button>
      </div>
    </div>

    <div class="opetation-container">
      <el-button type="primary" @click="showAddDialog">新增成绩</el-button>
      <el-button
        type="danger"
        @click="deleteSelected"
        :disabled="selectedRows.length === 0"
      >
        删除所选
      </el-button>
    </div>

    <div class="table">
      <el-table
        :data="scores"
        style="width: 100%; border-radius: 10px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          prop="scoreId"
          label="成绩ID"
          width="130px"
        ></el-table-column>
        <el-table-column
          prop="enrollmentId"
          label="选课ID"
          width="130px"
        ></el-table-column>
        <el-table-column prop="studentId" label="学生ID"></el-table-column>
        <el-table-column prop="grade" label="总成绩"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column prop="usualGrade" label="平时成绩"></el-table-column>
        <el-table-column prop="examGrade" label="考试成绩"></el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="80">
          <template #default="scope">
            <el-button
              type="primary"
              link
              icon="edit"
              @click="showEditDialog(scope.row)"
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div style="width: 40px; margin-top: 20px; margin-left: 60px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="paramsForm.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="paramsForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-dialog
      v-model="dialogVisible"
      title="修改学生成绩"
      style="min-width: 400px"
    >
      <el-form
        v-if="dialogVisible"
        ref="dialogForm"
        :inline="true"
        :model="dialogForm"
        :rules="rules"
        label-position="top"
        label-width="85px"
      >
        <el-form-item label="成绩id" prop="scoreId">
          <el-input
            v-model="dialogForm.scoreId"
            required
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="选课id" prop="enrollmentId">
          <el-input
            v-model="dialogForm.enrollmentId"
            required
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="学生id" prop="studentId">
          <el-input
            v-model="dialogForm.studentId"
            required
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="综合成绩" prop="grade">
          <el-input v-model="dialogForm.grade" required></el-input>
        </el-form-item>
        <el-form-item label="平时成绩" prop="usualGrade">
          <el-input v-model="dialogForm.usualGrade" required></el-input>
        </el-form-item>
        <el-form-item label="考试成绩" prop="examGrade">
          <el-input v-model="dialogForm.examGrade" required></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="resetDialog">取消</el-button>
          <el-button type="primary" @click="updateScore1">保存</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog
      v-model="dialogVisible1"
      title="添加学生成绩"
      style="min-width: 400px"
    >
      <el-form
        v-if="dialogVisible1"
        ref="dialogForm1"
        :inline="true"
        :model="dialogForm1"
        :rules="rules"
        label-position="top"
        label-width="85px"
      >
        <el-form-item label="选课id" prop="enrollmentId">
          <el-input v-model="dialogForm1.enrollmentId" required></el-input>
        </el-form-item>
        <el-form-item label="学生id" prop="studentId">
          <el-input v-model="dialogForm1.studentId" required></el-input>
        </el-form-item>
        <el-form-item label="综合成绩" prop="grade">
          <el-input v-model="dialogForm1.grade" required></el-input>
        </el-form-item>
        <el-form-item label="平时成绩" prop="usualGrade">
          <el-input v-model="dialogForm1.usualGrade" required></el-input>
        </el-form-item>
        <el-form-item label="考试成绩" prop="examGrade">
          <el-input v-model="dialogForm1.examGrade" required></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="resetDialog">取消</el-button>
          <el-button type="primary" @click="addScore1">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import {
  addScore,
  updateScore,
  deleteScoreByScoreId,
  showScoresByAdmin,
  showScoresByTeacher,
} from '@/api/score'
import userUserStore from '@/store/modules/user'
import { ElMessage } from 'element-plus'

const userStore = userUserStore()

export default {
  mounted() {
    this.getScoreList()
  },
  data() {
    return {
      total: 0,
      paramsForm: {
        pageSize: 10,
        pageNum: 1,
        keywords: '',
        id: userStore.userInfo.username,
      },
      scores: [],
      selectedRows: [],
      dialogVisible: false,
      dialogVisible1: false,
      dialogForm: {
        scoreId: 0,
        enrollmentId: 0,
        studentId: 0,
        grade: 0,
        usualGrade: 0,
        examGrade: 0,
      },
      dialogForm1: {
        enrollmentId: 0,
        studentId: 0,
        grade: 0,
        usualGrade: 0,
        examGrade: 0,
      },
      rules: {
        enrollmentId: [
          { required: true, message: '选课id不能为空', trigger: 'blur' },
        ],
        studentId: [
          { required: true, message: '学生id不能为空', trigger: 'blur' },
        ],
        grade: [
          { required: true, message: '综合成绩不能为空', trigger: 'blur' },
        ],
        usualGrade: [
          { required: true, message: '平时成绩不能为空', trigger: 'blur' },
        ],
        examGrade: [
          { required: true, message: '考试成绩不能为空', trigger: 'blur' },
        ],
      },
    }
  },
  methods: {
    resetInput() {
      ;(this.paramsForm.keywords = ''), this.getScoreList()
    },
    resetDialog() {
      this.dialogForm.enrollmentId = 0
      this.dialogForm.studentId = 0
      this.dialogForm.grade = 0
      this.dialogForm.usualGrade = 0
      this.dialogForm.examGrade = 0
      this.dialogVisible = false
      this.dialogForm1.enrollmentId = 0
      this.dialogForm1.studentId = 0
      this.dialogForm1.grade = 0
      this.dialogForm1.usualGrade = 0
      this.dialogForm1.examGrade = 0
      this.dialogVisible1 = false
      this.getScoreList()
    },
    // 获取成绩列表
    getScoreList() {
      const userRoleIds = userStore.userInfo.roleIds
      if (userRoleIds.includes(1) || userRoleIds.includes(2)) {
        const queryParams = `pageNum=${this.paramsForm.pageNum}&pageSize=${this.paramsForm.pageSize}&id=&keywords=${this.paramsForm.keywords}`
        showScoresByAdmin(queryParams)
          .then((response) => {
            const { data } = response
            this.scores = data.list
            this.total = data.total
          })
          .catch((error) => {
            this.$message.error(error.message)
          })
      } else if (userRoleIds.includes(4)) {
        const queryParams = `pageNum=${this.paramsForm.pageNum}&pageSize=${this.paramsForm.pageSize}&id=${this.paramsForm.id}&keywords=${this.paramsForm.keywords}`
        showScoresByTeacher(queryParams)
          .then((response) => {
            const { data } = response
            this.scores = data.list
            this.total = data.total
          })
          .catch((error) => {
            this.$message.error(error.message)
          })
      } else {
        alert('无权限')
      }
    },
    // 添加学生成绩
    addScore1() {
      addScore(this.dialogForm1)
        .then((res) => {
          // 处理请求成功的响应
          if (res.code == 200) {
            this.$message(res.message)
            this.resetDialog()
          }
        })
        .catch((error) => {
          // 处理请求失败的情况
          this.$message.error(error.message)
        })
    },
    // 更新学生成绩
    updateScore1() {
      updateScore(this.dialogForm)
        .then((res) => {
          // 处理请求成功的响应
          if (res.code == 200) {
            this.$message(res.message)
            this.resetDialog()
          }
        })
        .catch((error) => {
          // 处理请求失败的情况
          this.$message.error(error.message)
        })
    },
    // 删除学生成绩
    deleteUser(row: any) {
      let id = parseInt(row.scoreId)
      deleteScoreByScoreId(id)
        .then((response) => {
          // console.log(response)
        })
        .catch((error) => {
          this.$message.error(error.message)
        })
    },
    deleteSelected() {
      this.$confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          // 执行删除操作
          this.selectedRows.forEach((row) => {
            this.deleteUser(row)
          })
          this.selectedRows = []
        })
        .catch((error) => {
          // 取消删除操作
          ElMessage.error((error as Error).message)
        })
    },
    showAddDialog() {
      this.dialogVisible1 = true
    },
    showEditDialog(row: any) {
      Object.assign(this.dialogForm, row)
      this.dialogVisible = true
    },
    handleSizeChange(val: number) {
      this.paramsForm.pageSize = val
      this.getScoreList()
    },
    handleCurrentChange(val: number) {
      this.paramsForm.pageNum = val
      this.getScoreList()
    },
    handleSelectionChange(selection: []) {
      this.selectedRows = selection
    },
  },
}
</script>

<style scoped lang="scss">
.search-container {
  margin-top: 20px;
  margin-bottom: 30px;
  margin-left: 200px;
  display: flex;
}
.button {
  margin-left: 20px;
}
.opetation-container {
  margin-left: 60px;
  margin-bottom: 20px;
}
.table {
  margin-left: 50px;
  width: 90%;
}
</style>
